<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace="_fragments :: head(~{::title})">
    <title>归档</title>
</head>
<body>
    <!-- 导航 -->
    <nav th:replace="_fragments :: menu(4)" class="ui inverted attached segment m-padd-tb-mini m-shadow-small"/>

    <!-- 中间内容 -->
    <div class="m-container-small m-padded-tb-big">
        <div class="ui container">
            <!-- header -->
            <div class="ui top attached segment">
                <div class="ui middle aligned two column grid">
                    <div class="column">
                        <h3 class="ui teal header">归档</h3>
                    </div>
                    <div class="right aligned column">
                        共<h2 class="ui orange header m-inline-block m-text-thin" th:text="${blogCount}"/>篇博客
                    </div>
                </div>
            </div>

            <th:block th:each="item : ${archiveMap}">
                <h3 class="ui center aligned header" th:text="${item.key}"/>
                <div class="ui fluid vertical menu">
                    <a th:href="@{/blog/{id}(id=${blog.id})}" target="_blank" class="item" th:each="blog : ${item.value}">
                    <span>
                        <i class="teal circle icon"></i><span th:text="${blog.title}"/>
                        <div class="ui teal basic left pointing label m-padded-mini" th:text="${#dates.format(blog.updateTime, 'MMMdd')}"/>
                    </span>
                        <div class="ui orange basic left pointing label m-padded-mini" th:text="${blog.flag}"/>
                    </a>
                </div>
            </th:block>


        </div>
    </div>
<br>
<br>
    <!-- 底部footer -->
    <footer th:replace="_fragments :: footer" class="ui inverted vertical segment m-padded-tb-massive"/>

    <!--/*/<th:block th:replace="_fragments :: script">/*/-->
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.2/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.js"></script>
    <script type="text/javascript" color="0,0,205" opacity='0.7' zIndex="-2" count="99"
            src="//cdn.bootcss.com/canvas-nest.js/1.0.1/canvas-nest.min.js"></script>
    <!--/*/</th:block>/*/-->

    <script>
        $('.menu.toggle').click(function () {
           $('.m-item').toggleClass('m-mobile-hide');
        });

    </script>
</body>
</html>